import { t } from 'i18next'
import React, { FC, useEffect, useState } from 'react'
import { Avatar, IconCheckbox } from '../../../components'
import {
	Wrap,
	IconPass,
	IconNoPass,
	StyledRemarkTip,
	IconPassAvatar,
	IconNoPassAvatar,
	IconRoll,
	RemarkInfoSave,
	RemarkInfoClose,
	StyledTipWrap,
} from './style'
import { TerMode } from '../translator'
import shallow from 'zustand/shallow'
import { useRollCallStore } from '../store'
import { TextArea } from '@kedacom/react-next'
import { revert_mt } from '@/api/manager/mt'
export const ListItem: FC<TerMode> = ({
	mcc,
	status: { checked, pass, remarkTrue, isOnline },
	number,
	mtKey,
	remark,
}) => {
	const [isShowOperate, setIsShowOperate] = useState(false)
	const [textValue, setTextValue] = useState('')
	useEffect(() => {
		setTextValue(remark)
	}, [remark, remarkTrue])
	const {
		toggleClick,
		list,
		toggleCtrl,
		toggleShift,
		state,
		cur_roll_callee,
		closeRemark,
		remarkSave,
		setRollcallResult,
		_rollcallMemberSendMess,
	} = useRollCallStore(
		(state) => ({
			list: state.list,
			state: state.state,
			toggleClick: state.toggleClick,
			toggleCtrl: state.toggleCtrl,
			toggleShift: state.toggleShift,
			setRollcallResult: state.setRollcallResult,
			cur_roll_callee: state.cur_roll_callee,
			closeRemark: state.closeRemark,
			remarkSave: state.remarkSave,
			_rollcallMemberSendMess: state._rollcallMemberSendMess,
		}),
		shallow
	)
	let _index =
		list.findIndex((item) => {
			return item.mtKey === mtKey
		}) + 1
	const show_position = _index < 10 ? '0' + _index : _index + ''
	const indexWidth = `${number ?? '00'}`.length * 8

	const handleCheckItem = (e: React.MouseEvent) => {
		if (e.ctrlKey) {
			toggleCtrl(mtKey)
		} else if (e.shiftKey) {
			toggleShift(mtKey)
		} else {
			toggleClick(mtKey)
		}
	}
	const handleMultiCheck = (e: React.MouseEvent) => {
		e.stopPropagation()
		toggleCtrl(mtKey)
	}
	return (
		<>
			<Wrap
				checked={checked}
				indexWidth={indexWidth}
				title={mcc.name}
				onClick={handleCheckItem}
				onMouseEnter={() => {
					setIsShowOperate(true)
				}}
				onMouseLeave={() => {
					setIsShowOperate(false)
				}}
			>
				<div className="checkbox-wrap" onClick={handleMultiCheck}>
					<IconCheckbox className="icon-checkbox" />
				</div>
				<div className="poll_item_position">{show_position}</div>
				<div className="avatar">
					{pass === 2 && <Avatar value={mcc} />}
					{pass === 1 && <IconPassAvatar></IconPassAvatar>}
					{pass === 0 && <IconNoPassAvatar></IconNoPassAvatar>}
				</div>
				<div className="name">
					<div className={`roll_item_name`}>{mcc.name}</div>
					{/* 当前的点名终端可进行点名 */}
					{(isShowOperate || checked) && isOnline && state === 1 && cur_roll_callee?.mt_key === mtKey && (
						<span className="pass-icon">
							<IconPass
								onClick={() => {
									setRollcallResult(mtKey, 1)
								}}
								title={t('通过')}
							></IconPass>
							<IconNoPass
								onClick={() => {
									setRollcallResult(mtKey, 0)
								}}
								title={t('不通过')}
							></IconNoPass>
						</span>
					)}
					{/* 非当前的点名终端 操作打开点名通过和不通过操作*/}
					{(isShowOperate || checked) && isOnline && state === 1 && cur_roll_callee?.mt_key !== mtKey && (
						<span className="pass-icon">
							<IconRoll
								onClick={() => {
									_rollcallMemberSendMess(revert_mt(mcc))
								}}
								title={t('点名')}
							></IconRoll>
						</span>
					)}
				</div>
			</Wrap>
			{!remarkTrue && remark !== '' && (
				<StyledTipWrap title={t('备注：{{name}}', { name: remark })}>
					{t('备注：{{name}}', { name: remark })}
				</StyledTipWrap>
			)}
			{remarkTrue && (
				<StyledRemarkTip className="remark-info">
					<div className="operateWrap">
						<span className="remark-tip">{t('备注信息')}</span>
						<div className="operate">
							<RemarkInfoSave
								onClick={() => {
									remarkSave(textValue)
								}}
								title={t('保存')}
							/>
							<RemarkInfoClose
								onClick={() => {
									closeRemark()
								}}
								title={t('关闭')}
							/>
						</div>
					</div>
					<div className="textAreaWrap">
						<TextArea
							value={textValue}
							onChange={(e, v) => {
								setTextValue(v)
							}}
							placeholder={t('请输入')}
							cols={20}
							rows={3}
							width={'100%'}
							style={{ border: '0px' }}
							height={'100%'}
						/>
					</div>
				</StyledRemarkTip>
			)}
		</>
	)
}
